<template>
  <div id="body" class="bruce">
    <div class="header">
      <div>
        <p class="text">随机出题</p>
        <el-tooltip
          class="item"
          effect="dark"
          :content="isScreen ? '取消全屏' : '全屏'"
          placement="top-start"
        >
          <i
            class="el-icon-full-screen"
            style="
              position: absolute;
              right: 100px;
              top: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
            "
            @click="turnOff"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <ul class="bubble-bgwall">
      <li v-for="v in 10" :key="v">{{ v }}</li>
    </ul>
    <section
      style="
        height: calc(100vh - 300px);
        width: 100%;
        position: absolute;
        top: 80px;
      "
    >
      <el-container>
        <el-header>
          <el-row style="height: 100px; border: solid 2px #e3e3e3">
            <el-col
              style="height: 100%; border-right: #e3e3e3 2px solid"
              :span="4"
              class="flex"
            >
              <h2 style="font-size: 35px">答题情况</h2>
            </el-col>
            <el-col style="height: 100%" :span="20">
              <div
                style="margin-top: 5px; height: 100%; width: 100%"
                class="flex"
              >
                <div
                  style="margin: 0 5px"
                  v-for="(value, index) in proData"
                  :key="index"
                >
                  <el-button
                    circle
                    :type="value.checked ? 'success' : 'default'"
                    size="default"
                    @click="clickNum(index)"
                    style="width: 60px; height: 60px"
                    ><span style="font-size: 20px">
                      {{ index + 1 }}
                    </span></el-button
                  >
                </div>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main style="margin-top: 50px">
          <el-row
            style="height: calc(100vh - 240px); border: solid 2px #e3e3e3"
          >
            <el-col
              style="height: 100%; border-right: #e3e3e3 2px solid"
              :span="4"
              class="flex_s"
            >
              <div
                style="flex: 1; border-bottom: #e3e3e3 2px solid; width: 100%"
                class="flex_s"
              >
                <h2 style="font-size: 35px">抽中题号</h2>
                <p :style="{ color: rangeColor, 'font-size': '120px' }">
                  {{ loading ? changeNum : curNum }}
                </p>
              </div>
              <div style="flex: 2; width: 100%">
                <div
                  style="
                    height: 100%;
                    width: 100%;
                    justify-content: space-around;
                  "
                  class="flex_s"
                >
                  <div style="margin-bottom: 25px">
                    <el-button
                      type="primary"
                      @click="rande"
                      style="height: 100px; width: 200px; font-size: 35px"
                      :loading="loading"
                      >开始</el-button
                    >
                  </div>
                  <el-button
                    @click="stop"
                    type="danger"
                    style="
                      height: 100px;
                      width: 200px;
                      font-size: 35px;
                      background-color: rgb(214, 40, 40);
                    "
                    >结束</el-button
                  >
                  <!-- <div style="margin-top: 25px;">
                    <el-button @click="$router.go(0)" type="info"
                      style="height: 80px;width: 150px;font-size: 25px;">重置</el-button>
                  </div> -->
                </div>
              </div>
            </el-col>
            <el-col style="height: 100%" :span="20">
              <div
                style="
                  padding: 25px;
                  font-size: 55px;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  box-sizing: border-box;
                "
              >
                <div
                  style="
                    width: 100%;
                    overflow-wrap: break-word;
                    word-wrap: break-word;
                    height: 200px;
                    font-weight: 600;
                  "
                >
                  {{ dataList.name }}
                </div>
                <div
                  style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    height: calc(100% - 200px);
                    box-sizing: border-box;
                  "
                >
                  <p
                    v-for="(item, index) in dataList.select"
                    :key="index"
                    style="line-height: 65px; font-size: 43px"
                  >
                    {{ item.option + "." + item.title }}
                  </p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </section>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      isScreen: false,
      changeNum: 0, //只是为了数字闪烁用
      proData: [],
      processNum: 0,
      loading: false,
      rangeColor: "",
      titleData: [],
      dataList: {},
      curNum: 0,
      interior: [1, 3, 5, 7],
    };
  },
  mounted() {
    this.init();
    this.reqFullScreen();
    window.addEventListener("resize", () => {
      // this.turnOff()
    });
  },
  methods: {
    turnOff() {
      this.isScreen = !this.isScreen;
      if (this.isScreen) {
        this.reqFullScreen();
      } else {
        this.exitFullScreen();
      }
    },
    // 进入全屏
    reqFullScreen() {
      if (document.documentElement.requestFullScreen) {
        document.documentElement.requestFullScreen();
      } else if (document.documentElement.webkitRequestFullScreen) {
        document.documentElement.webkitRequestFullScreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.documentElement.mozRequestFullScreen();
      }
    },
    // 退出全屏
    exitFullScreen() {
      if (document.documentElement.requestFullScreen) {
        document.exitFullScreen();
      } else if (document.documentElement.webkitRequestFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.documentElement.mozRequestFullScreen) {
        document.mozCancelFullScreen();
      }
    },
    init() {
      [0, 1, 2, 3].forEach((v) => {
        this.proData.push({ num: v, checked: false });
      });
      this.titleData = [
        {
          name: "1.城市管理网格员职业技能共设（）个等级",
          id: 1,
          checked: false,
          select: [
            { option: "A", title: "三" },
            { option: "B", title: "四" },
            { option: "C", title: "五" },
            { option: "D", title: "三" },
          ],
        },
        {
          name: "2.下列关于计算机信息系统的表述正确的是（）",
          id: 2,
          checked: false,
          select: [
            {
              option: "A",
              title: "由计算机及其相关的和配套的设备、设施(含网络)构成的",
            },
            {
              option: "B",
              title: "由计算机及其相关的和配套的设备、设施构成的",
            },
            {
              option: "C",
              title:
                "按照一定的应用目标和规则对信息进行采集、加工、存储、传输、检索等处理的人机系统",
            },
            {
              option: "D",
              title:
                "按照一定的应用目标和规则对信息进行采集、加工、存储、传输、检索等处理的系统",
            },
          ],
        },
        {
          name: "3.计算机信息系统安全保护主要包括_______。",
          id: 3,
          checked: false,
          select: [
            {
              option: "A",
              title: "保障计算机及其相关的和配套的设备、设施(含网络)的安全",
            },
            { option: "B", title: "运行环境的安全" },
            { option: "C", title: "保障信息的安全" },
            { option: "D", title: "保障计算机功能的正常发挥" },
          ],
        },
        {
          name: "4.下列对于城市网格员职业能力特征表述正确的是（）",
          id: 4,
          checked: false,
          select: [
            { option: "A", title: "具有学习、表达和计算能力" },
            { option: "B", title: "具有空间感、形体知觉和色觉" },
            { option: "C", title: "肢体灵活，动作协调" },
            { option: "D", title: "沟通交流能力、观察分析能力" },
          ],
        },
        {
          name: "5.下列关于单元网格表述错误的是（）",
          id: 5,
          checked: false,
          select: [
            { option: "A", title: "是数字化城市管理的基本监督和管理单元。" },
            {
              option: "B",
              title:
                "基于城市大比例尺基础地理数据，根据数字化城市管理工作的需要，按照规定的原则划分的、边界清晰的多边形区域。",
            },
            {
              option: "C",
              title:
                "单元网格划分原则有属地管理原则、面积适当原则、现状管理原则等。",
            },
            { option: "D", title: "一个单元网格可以有多个标识码。" },
          ],
        },
        {
          name: "6.部件是城市管理公共区域内的各项（）与（），包括公用设施、交通设施、市容环境设施、园林绿化设施和其他部件等。",
          id: 6,
          checked: false,
          select: [
            { option: "A", title: "市政工程设施" },
            { option: "B", title: "市政环境设施" },
            { option: "C", title: "市政公用设施" },
            { option: "D", title: "市政交通设施" },
          ],
        },
        {
          name: "7.专业部门是指部件和事件问题的（）、（）、（）。",
          id: 7,
          checked: false,
          select: [
            { option: "A", title: "主管部门" },
            { option: "B", title: "部件的权属单位" },
            { option: "C", title: "采集部门" },
            { option: "D", title: "养护单位" },
          ],
        },
        {
          name: "8.下列属于部件小类的是（）",
          id: 8,
          checked: false,
          select: [
            { option: "A", title: "公共厕所" },
            { option: "B", title: "私搭乱建" },
            { option: "C", title: "店外经营" },
            { option: "D", title: "文物古迹" },
          ],
        },
        {
          name: "9.下列属于事件大类的是（）",
          id: 9,
          checked: false,
          select: [
            { option: "A", title: "市容环境" },
            { option: "B", title: "市容环境设施" },
            { option: "C", title: "街面秩序" },
            { option: "D", title: "交通设施" },
          ],
        },
        {
          name: "10.下列关于事件大小类表述错误的是（）",
          id: 10,
          checked: false,
          select: [
            {
              option: "A",
              title:
                "市容环境类，主要包括私搭乱建、违章接坡、建筑物不洁、暴露垃圾等",
            },
            {
              option: "B",
              title: "施工管理类，主要包括工地扬尘、施工废弃料、施工占道等",
            },
            {
              option: "C",
              title:
                "突发事件类，主要包括燃气管道破裂、路面塌陷、排水管道堵塞、街头座椅等",
            },
            {
              option: "D",
              title: "其他事件类，主要包括违规高空悬挂作业、临街屠宰等",
            },
          ],
        },
        {
          name: "11.兴趣点宜包含具有地理标识作用的（）。",
          id: 11,
          checked: false,
          select: [
            { option: "A", title: "建筑物、单位、店铺" },
            { option: "B", title: "车站、码头、广场" },
            { option: "C", title: "桥、碑、亭" },
            { option: "D", title: "雕塑、喷泉" },
          ],
        },
        {
          name: "12.关于数据采集区域类别划分正确的（）",
          id: 12,
          checked: false,
          select: [
            {
              option: "A",
              title: "一类区域：核心区、人流密集区、一般城区、重点街道",
            },
            { option: "B", title: "二类区域：商业区、旅游景区" },
            {
              option: "C",
              title: "三类区域：城乡结合部、拆迁区和权属未移交区等。",
            },
          ],
        },
      ];
    },
    // 点击题号
    clickNum(index) {
      // 当前答过的不能点击
      if (this.proData[index].checked == true) {
        return;
      }
      if (index == 0) {
        this.$message({
          message: "请直接点击开始进行抽题！",
          type: "warning",
        });
      } else {
        if (this.proData[index - 1].checked == false) {
          this.$message({
            message: "请按题号顺序答题！",
            type: "warning",
          });
        } else {
          this.curNum = 0;
          this.dataList = {};
        }
      }
    },
    stop() {
      if (this.time == null || this.processNum >= this.proData.length) {
        return;
      }
      clearInterval(this.time);
      this.time = null;
      if (this.interior.length > 0) {
        this.dataList = this.titleData.find(
          (item) => item.id == this.interior[0]
        );
      } else {
        this.dataList = this.titleData[this.curNum - 1];
      }
      this.rangeColor = `rgb(0,0,0)`;
      this.proData[this.processNum].checked = true;
      this.processNum++;
      this.loading = false;
      this.noRepeat();
      // 结束后题号变成当前选中对象的id
      this.curNum = this.dataList.id;
    },
    // 答过的题不再出现
    noRepeat() {
      if (this.interior.length > 0) {
        this.interior.shift();
        this.titleData.splice(this.interior - 1, 1);
      } else {
        this.titleData.splice(this.curNum - 1, 1);
      }
    },
    rande() {
      if (this.processNum >= this.proData.length) {
        this.$message({
          message: "答题已结束！",
          type: "warning",
        });
        return;
      }
      this.loading = true;
      this.time = setInterval(() => {
        this.changeNum = Math.floor(Math.random() * this.titleData.length) + 1;
        this.curNum = Math.floor(Math.random() * this.titleData.length) + 1;
        let r = Math.floor(Math.random() * 244) + 1;
        let g = Math.floor(Math.random() * 244) + 1;
        let b = Math.floor(Math.random() * 244) + 1;
        this.rangeColor = `rgb(${r},${g},${b})`;
      }, 30);
    },
  },
};
</script>
<style scoped>
.flex_s {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

h2 {
  background: linear-gradient(to right, rgb(151, 14, 14), rgb(18, 54, 216));
  -webkit-background-clip: text;
  color: transparent;
}

.text {
  text-align: center;
  letter-spacing: 2px;
  animation: move 1s;
}

@keyframes move {
  from {
    letter-spacing: -50px;
    filter: blur(10px);
  }

  to {
    letter-spacing: 5px;
    filter: blur(2px);
  }
}

.header {
  position: relative;
  color: antiquewhite;
  background-color: #6990f6;
  /* background-image: linear-gradient(270deg, #8146b4, #6990f6); */
  text-align: center;
  width: 100%;
  padding: 12px;
  font-size: 30px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.72);
}

/* 答题序号 */
.answer-card-content {
  width: 320px;
  height: 100%;
  box-sizing: border-box;
  /* overflow-y: scroll; */
}

.answer-card-content .item {
  text-align: center;
  display: flex;
  align-content: flex-start;
  flex-flow: row wrap;
}

.answer-card-content .item .btn_box {
  flex: 0 0 20%;
}

.answer-card-content .item .btn_box button {
  margin-top: 10px;
  width: 50px;
  height: 50px;
  text-align: center;
}

/* 气泡背景 */

.bruce {
  height: 100vh;
  /* background-image: linear-gradient(270deg, #8146b4, #6990f6); */
  /* background-image: linear-gradient(270deg, #51a1ec, #7fa0f5); */
  background-image: linear-gradient(270deg, skyblue, #a8b9eb);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.bubble-bgwall {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0;
}

.bubble-bgwall li {
  display: flex;
  position: absolute;
  bottom: -200px;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.15);
  color: #ccc;
  animation: bubble 15s infinite;
}

.bubble-bgwall li:nth-child(1) {
  left: 10%;
}

.bubble-bgwall li:nth-child(2) {
  left: 20%;
  width: 90px;
  height: 90px;
  animation-duration: 7s;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(3) {
  left: 25%;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.3);
  animation-duration: 8s;
}

.bubble-bgwall li:nth-child(5) {
  left: 70%;
}

.bubble-bgwall li:nth-child(6) {
  left: 80%;
  width: 120px;
  height: 120px;
  background-color: rgba(255, 255, 255, 0.2);
  animation-delay: 3s;
}

.bubble-bgwall li:nth-child(7) {
  left: 32%;
  width: 160px;
  height: 160px;
  animation-delay: 2s;
}

.bubble-bgwall li:nth-child(8) {
  left: 55%;
  width: 40px;
  height: 40px;
  font-size: 12px;
  animation-duration: 15s;
  animation-delay: 4s;
}

.bubble-bgwall li:nth-child(9) {
  left: 25%;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.3);
  font-size: 12px;
  animation-duration: 12s;
  animation-delay: 2s;
}

@keyframes bubble {
  0% {
    opacity: 0.5;
    transform: translateY(0) rotate(45deg);
  }

  25% {
    opacity: 0.75;
    transform: translateY(-400px) rotate(90deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-600px) rotate(135deg);
  }

  100% {
    opacity: 0;
    transform: translateY(-1000px) rotate(180deg);
  }
}
</style>